<template>
  <div class="batch-call-clue-container">
    <!-- 配置表单 -->
    <div class="config-form-wrapper">
      <el-form ref="form" :model="formData" label-width="80px" class="enhanced-form">
        <!-- 状态和保存按钮行 -->
        <div class="status-save-row">
          <div class="status-section">
            <div class="form-item-header">
              <Icon icon="ep:setting" class="header-icon" />
              <span class="header-title">规则状态</span>
            </div>
            <el-switch
              v-model="formData.status"
              class="enhanced-switch"
              inline-prompt
              active-text="正常"
              inactive-text="关闭"
              :active-value="1"
              :inactive-value="0"
            />
          </div>
          <div class="save-section">
            <el-button
              v-hasPermi="['crm:module:update']"
              @click="submitForm"
              type="primary"
              :disabled="formLoading"
              class="save-button"
            >
              <Icon icon="ep:check" class="btn-icon" />
              保 存
            </el-button>
          </div>
        </div>

        <!-- 条件配置区域 -->
        <div class="config-sections">
          <!-- 通话时长条件 -->
          <div class="config-section">
            <div class="section-header">
              <Icon icon="ep:timer" class="section-icon" />
              <h4 class="section-title">自动转入线索的条件</h4>
            </div>
            <div class="condition-item">
              <div class="condition-content">
                <span class="required-mark">*</span>
                <span class="condition-text">当通话时长超过</span>
                <el-input
                  type="number"
                  min="0"
                  class="enhanced-input duration-input"
                  v-model="formData.transClueSeconds"
                  placeholder="请输入秒"
                >
                  <template #suffix>
                    <span class="input-suffix">秒</span>
                  </template>
                </el-input>
                <span class="condition-text">时，自动转为我的线索</span>
              </div>
            </div>
          </div>

          <!-- 或者分隔线 -->
          <div class="divider-section">
            <div class="divider-line"></div>
            <span class="divider-text">或者</span>
            <div class="divider-line"></div>
          </div>

          <!-- AI意向等级条件 -->
          <div class="config-section">
            <div class="condition-item">
              <div class="condition-content">
                <span class="required-mark">*</span>
                <span class="condition-text">当AI摘要意向等级为</span>
                <el-select
                  multiple
                  class="enhanced-select level-select"
                  v-model="formData.aiSummaryLevel"
                  placeholder="请选择等级"
                  clearable
                >
                  <template #prefix>
                    <Icon icon="ep:cpu" />
                  </template>
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                    class="enhanced-option"
                  >
                    <div class="option-content">
                      <Icon icon="ep:star" class="option-icon" />
                      <span>{{ item.label }}</span>
                    </div>
                  </el-option>
                </el-select>
                <span class="condition-text">时，自动转为我的线索</span>
              </div>
            </div>
          </div>

          <!-- 说明文字 -->
          <div class="description-section">
            <div class="description-content">
              <Icon icon="ep:info-filled" class="description-icon" />
              <p class="description-text">
                AI摘要意向等级指的是通话结束后，由AI程序自动对此通话进行智能分析并且标记意向等级
              </p>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as crmModelApi from '@/api/crm/module/index'
const props = defineProps({
  moduleId: {
    type: Number
  }
})
const formData = reactive({
  id: null,
  status: 0,
  transClueSeconds: 60,
  aiSummaryLevel: null,
  moduleId: '',
  clueTagType: 0 //自动标记类型 0-关  1-按时长  2-意向等级
})
const createType = ref(true)
const formLoading = ref(false)
const options = [
  {
    label: '低',
    value: '低',
    id: 0
  },
  {
    label: '中',
    value: '中',
    id: 1
  },
  {
    label: '高',
    value: '高',
    id: 2
  }
]
/*详情*/
const getDetail = async (val) => {
  const data = await crmModelApi.getClueTransConfig(val)
  if (data) {
    createType.value = false
    const { aiSummaryLevel, clueTagType, moduleId, id, status, transClueSeconds } = data
    Object.assign(formData, {
      aiSummaryLevel,
      clueTagType,
      moduleId,
      id,
      status,
      transClueSeconds
    })
  } else {
    createType.value = true
    formData.status = 0
    formData.transClueSeconds = 0
    formData.id = null
    formData.aiSummaryLevel = null
  }
}
watch(
  () => props.moduleId,
  (val) => {
    if (val) {
      formData.moduleId = val
      if (val) getDetail(val)
    }
  },
  { immediate: true, deep: true }
)
/*保存*/
const submitForm = async () => {
  if (!formData.aiSummaryLevel && formData.transClueSeconds === '') {
    ElMessage.error('请选择意向等级或输入时长秒数')
    return
  }
  try {
    formLoading.value = true
    // 创建
    if (createType.value) {
      const data = formData
      await crmModelApi.createClueTransConfig(data)
      ElMessage.success('保存成功')
    } else {
      //更新
      await crmModelApi.updateClueTransConfig(formData)
      ElMessage.success('保存成功')
    }
  } finally {
    formLoading.value = false
  }
}
</script>

<style scoped lang="scss">
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.batch-call-clue-container {
  padding: 24px;
  background: white;
  min-height: 100%;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.config-form-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.enhanced-form {
  :deep(.el-form-item__label) {
    font-weight: 600;
    color: $text-regular;
    padding-bottom: 8px;

    @media (max-width: 768px) {
      font-size: 14px;
      width: 100% !important;
      text-align: left !important;
      margin-bottom: 8px;
    }
  }

  :deep(.el-form-item__content) {
    @media (max-width: 768px) {
      margin-left: 0 !important;
    }
  }

  // H5适配：表单项垂直布局
  @media (max-width: 768px) {
    :deep(.el-form-item) {
      display: block;
    }
  }
}

/* 状态和保存按钮行 */
.status-save-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, $bg-color 0%, #f0f2ff 100%);
  border-radius: $border-radius;
  border: 1px solid $border-light;
  margin-bottom: 24px;
  box-shadow: $shadow-base;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    text-align: center;
  }
}

.status-section {
  display: flex;
  align-items: center;
  gap: 12px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
  }

  .form-item-header {
    display: flex;
    align-items: center;
    gap: 8px;

    .header-icon {
      font-size: 16px;
      color: $primary-color;
    }

    .header-title {
      font-size: 14px;
      font-weight: 600;
      color: $text-regular;
    }
  }
}

.enhanced-switch {
  :deep(.el-switch__core) {
    border-radius: 20px;
    transition: all 0.3s ease;

    &.is-checked {
      background-color: $success-color;
      border-color: $success-color;
    }

    &:not(.is-checked) {
      background-color: $danger-color;
      border-color: $danger-color;
    }
  }

  :deep(.el-switch__action) {
    transition: all 0.3s ease;
  }
}

.save-section {
  .save-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: $border-radius-small;
    font-weight: 600;
    background: $primary-color;
    border-color: $primary-color;
    transition: all 0.3s ease;

    .btn-icon {
      font-size: 14px;
    }

    &:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    @media (max-width: 768px) {
      width: 100%;
      justify-content: center;
      padding: 12px 20px;
    }
  }
}

/* 配置区域 */
.config-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.config-section {
  background: white;
  border-radius: $border-radius;
  border: 1px solid $border-light;
  overflow: hidden;
  box-shadow: $shadow-base;

  .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
    color: white;

    @media (max-width: 768px) {
      padding: 14px 16px;
    }

    .section-icon {
      font-size: 18px;
      flex-shrink: 0;

      @media (max-width: 768px) {
        font-size: 16px;
      }
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0;

      @media (max-width: 768px) {
        font-size: 14px;
      }
    }
  }

  .condition-item {
    padding: 20px;

    @media (max-width: 768px) {
      padding: 16px;
    }
  }
}

.condition-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .required-mark {
    color: $danger-color;
    font-weight: 600;
    font-size: 14px;
  }

  .condition-text {
    font-size: 14px;
    color: $text-regular;
    font-weight: 500;
    white-space: nowrap;

    @media (max-width: 768px) {
      font-size: 13px;
      white-space: normal;
    }
  }
}

/* 输入框样式 */
.enhanced-input {
  :deep(.el-input__wrapper) {
    border-radius: $border-radius-small;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    padding: 8px 12px;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
      border-color: $primary-color;
    }
  }

  &.duration-input {
    width: 120px;

    @media (max-width: 768px) {
      width: 100%;
      max-width: 200px;
    }
  }

  .input-suffix {
    color: $text-secondary;
    font-size: 12px;
    font-weight: 500;
  }
}

/* 选择器样式 */
.enhanced-select {
  :deep(.el-select__wrapper) {
    border-radius: $border-radius-small;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    padding: 8px 12px;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focused {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
      border-color: $primary-color;
    }
  }

  &.level-select {
    width: 160px;

    @media (max-width: 768px) {
      width: 100%;
      max-width: 200px;
    }
  }
}

.enhanced-option {
  .option-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;

    .option-icon {
      font-size: 14px;
      color: $warning-color;
    }
  }
}

/* 分隔线区域 */
.divider-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;

  @media (max-width: 768px) {
    gap: 12px;
    margin: 12px 0;
  }

  .divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, $border-color 50%, transparent 100%);
  }

  .divider-text {
    font-size: 14px;
    color: $text-secondary;
    font-weight: 500;
    padding: 6px 12px;
    background: $bg-color;
    border-radius: 20px;
    border: 1px solid $border-light;

    @media (max-width: 768px) {
      font-size: 13px;
      padding: 4px 10px;
    }
  }
}

/* 说明区域 */
.description-section {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(103, 194, 58, 0.1) 100%);
  border-radius: $border-radius;
  border: 1px solid rgba(103, 194, 58, 0.2);
  padding: 16px 20px;

  @media (max-width: 768px) {
    padding: 14px 16px;
  }

  .description-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    @media (max-width: 768px) {
      gap: 8px;
    }

    .description-icon {
      font-size: 16px;
      color: $success-color;
      flex-shrink: 0;
      margin-top: 2px;

      @media (max-width: 768px) {
        font-size: 14px;
      }
    }

    .description-text {
      font-size: 13px;
      color: $text-secondary;
      line-height: 1.6;
      margin: 0;

      @media (max-width: 768px) {
        font-size: 12px;
      }
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .batch-call-clue-container {
    background: #374151;
  }

  .status-save-row {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    border-color: #6b7280;
  }

  .config-section {
    background: #374151;
    border-color: #6b7280;
  }

  .condition-text {
    color: #f9fafb;
  }

  .description-section {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.05) 0%, rgba(52, 211, 153, 0.1) 100%);
    border-color: rgba(52, 211, 153, 0.2);
  }

  .description-text {
    color: #d1d5db;
  }

  .divider-text {
    background: #4b5563;
    border-color: #6b7280;
    color: #d1d5db;
  }

  .enhanced-input {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .enhanced-select {
    :deep(.el-select__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-select__placeholder {
        color: #9ca3af;
      }
    }
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .batch-call-clue-container {
    padding: 12px;
  }

  .status-save-row {
    padding: 12px;
  }

  .config-section {
    .section-header {
      padding: 12px 14px;
    }

    .condition-item {
      padding: 14px;
    }
  }

  .condition-content {
    gap: 8px;
  }

  .condition-text {
    font-size: 12px;
  }

  .enhanced-input.duration-input,
  .enhanced-select.level-select {
    width: 100%;
  }

  .description-section {
    padding: 12px 14px;
  }

  .save-button {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.config-section {
  animation: fadeInUp 0.3s ease-out;
}

.config-section:nth-child(2) {
  animation-delay: 0.1s;
}

.config-section:nth-child(3) {
  animation-delay: 0.2s;
}
</style>
